<template>
  <div>
    <div style="font-size:16px;font-weight: 600;"> <el-radio></el-radio>人员收藏夹</div>
    <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()">
      <!--新增 -->
      <el-form-item style="margin-top:15px" v-if="state.hasPermission('crm:crmdatafavorite:save')">
        <el-button @click="addOrUpdateHandle()">{{ $t("add")
          }}</el-button>
        <el-button @click="batchQuery()" :disabled="state.multiple">批量查询</el-button>
      </el-form-item>
      <el-table :header-cell-style="{ 'background': '#eef1f6', 'color': '#1f2d3d', 'border-color': '#dfe6ec' }"
        v-loading="state.dataListLoading" :data="state.dataList" border
        @selection-change="state.dataListSelectionChangeHandle" style="width: 100%;margin-top: 15px">
        <el-table-column type="selection"></el-table-column>
        <el-table-column align="center" prop="id" label="ID" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="dfvName" label="收藏夹名称" show-overflow-tooltip>
          <template v-slot="scope">
            <div v-if="scope.row.readOnly == 1">
              <el-text :underline="false">{{ scope.row.dfvName }}</el-text>
            </div>
            <div v-if="scope.row.readOnly == 0">
              <el-text type="primary" :underline="false">{{ scope.row.dfvName }}</el-text>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="count" label="人员数量" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="dfvIfPublic" label="是否共享" show-overflow-tooltip>
          <template v-slot="scope">
            <el-text v-if="scope.row.dfvIfPublic == 0">不共享</el-text>
            <el-text v-if="scope.row.dfvIfPublic == 1">共享给所有人</el-text>
            <el-text v-if="scope.row.dfvIfPublic == 2">共享给指定人员</el-text>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="creatorName" label="创建人" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="readOnly" label="操作">
          <template v-slot="scope">
            <template v-if="isAdmin">
              <el-button link type="primary" @click="checkList(scope.row.id)">查看</el-button>
              <el-button link type="primary" v-if="state.hasPermission('crm:crmdatafavorite:update')"
                @click="addOrUpdateHandle(scope.row.id)">{{ $t("编辑") }}</el-button>
              <el-button link type="primary" v-if="state.hasPermission('crm:crmdatafavorite:emptyBydfvId')"
                @click="open(scope.row.id)">清空</el-button>
              <el-button link type="danger" v-if="state.hasPermission('crm:crmdatafavorite:delete')"
                @click="state.deleteHandle(scope.row.id)">删除</el-button>
            </template>
            <div v-if="!isAdmin">
              <template v-if="scope.row.readOnly === 1">
                <el-button link type="primary" @click="checkList(scope.row.id)">查看</el-button>
              </template>
              <template v-if="scope.row.readOnly === 0">
                <el-button link type="primary" @click="checkList(scope.row.id)">查看</el-button>
                <el-button link type="primary" v-if="state.hasPermission('crm:crmdatafavorite:update')"
                  @click="addOrUpdateHandle(scope.row.id)">{{ $t("编辑") }}</el-button>
                <el-button link type="primary" v-if="state.hasPermission('crm:crmdatafavorite:emptyBydfvId')"
                  @click="open(scope.row.id)">清空</el-button>
                <el-button link type="danger" v-if="state.hasPermission('crm:crmdatafavorite:delete')"
                  @click="state.deleteHandle(scope.row.id)">删除</el-button>
              </template>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit"
      :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle"
      @current-change="state.pageCurrentChangeHandle"> </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update :key="addKey" ref="addOrUpdateRef" @refreshDataList="refreshDataList"></add-or-update>
  </div>
</template>
<script lang="ts" setup>
import useView from "@/hooks/useView";
import { nextTick, reactive, ref, toRefs, watch } from "vue";
import AddOrUpdate from "./favorites-list-add-or-update.vue";
import { useRouter } from 'vue-router'
import baseService from "@/service/baseService";
import { ElMessage, ElMessageBox } from 'element-plus'
const view = reactive({
  getDataListURL: '/crm/crmdatafavorite/page',
  getDataListIsPage: true,
  deleteURL: "/crm/crmdatafavorite",
  deleteIsBatch: true,
  dataForm: {
    id: "",
    dfvIdsStr: "",
    state: 1
  }
});


const init = () => {
  getInfo();
};

const isAdmin = ref(false);
const getInfo = () => {
  return baseService.get("/sys/user/info").then((res) => {
    isAdmin.value = res.data.userId === '1';
  });
};


//查看跳转
const router = useRouter();
const checkList = (row: any) => {
  router.push({
    path: "/expocube/information-list-favorites",
    query: {
      id: row,
      state2: state.dataForm.state
    }
  });
};


//批量查询
const batchQuery = () => {
  let ids: string[] = [];
  for (let i = 0; i < state.dataListSelections!.length; i++) {
    ids.push(state.dataListSelections![i].id);
  }
  const idsStr = ids.join(',');
  state.dataForm.dfvIdsStr = idsStr;
  router.push({
    path: "/expocube/information-list-favorites",
    query: {
      ids: idsStr,
    }
  });
};


//清空
const open = (id: any) => {
  return ElMessageBox.confirm(
    '确定进行[清空]操作?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then((isConfirmed) => {
      if (isConfirmed) {
        return baseService.delete("/crm/crmdatafavorite/emptyBydfvId/" + id, id).then((res) => {
          if (res.code === 0) {
            // 重新获取数据列表
            state.getDataList()
          }
        });
      } else {
        return Promise.reject('清空收藏夹成功');
      }
    })
    .then(() => {
      ElMessage({
        type: 'success',
        message: '清空收藏夹成功',
      });
    })
    .catch((error) => {
      ElMessage({
        type: 'info',
        message: error || '清空已取消',
      });
    });
};

const state = reactive({ ...useView(view), ...toRefs(view) });

const addKey = ref(0);
const addOrUpdateRef = ref();
const addOrUpdateHandle = (id?: number) => {
  addKey.value++;
  nextTick(() => {
    addOrUpdateRef.value.init(id);
  });
};

//刷新数据
const refreshDataList = () => {
  state.refreshDataList();
};

init();
</script>
